<template>
	<uv-navbar :fixed="true" :placeholder="true" :title="title" left-arrow @leftClick="$onClickLeft" />
	<view class="container" style="padding:20rpx;">
		<view style="padding-bottom: 60rpx;">
			<view class="bg-white">
				<view class="section">
					<!-- payment and amount begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>充电订单ID:</view>
								<view class="font-weight-bold">{{ order.orderId }}</view>
							</view>
							<view class="pay-cell">
								<view>用户卡/用户账号:</view>
								<view class="font-weight-bold">{{ order.userId }}</view>
							</view>
							<view class="pay-cell">
								<view>站点ID:</view>
								<view class="font-weight-bold">{{ order.stationId }}</view>
							</view>
							<view class="pay-cell">
								<view>站点名:</view>
								<view class="font-weight-bold">{{ order.stationName }}</view>
							</view>
						</view>
					</list-cell>
					<!-- payment and amount end -->
				</view>
				<view class="section">
					<!-- order info begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>终端ID:</view>
								<view class="font-weight-bold">{{ order.deviceId }}</view>
							</view>
							<view class="pay-cell">
								<view>终端号:</view>
								<view class="font-weight-bold">{{ order.deviceCode }}</view>
							</view>
							<view class="pay-cell">
								<view>充电桩类型:</view>
								<view class="font-weight-bold">{{ order.deviceModel == 1 ? '直流快充' : '交流慢充' }}</view>
							</view>
							<view class="pay-cell">
								<view>充电时长:</view>
								<view class="font-weight-bold">{{ order.chargeTime }}</view>
							</view>
						</view>
					</list-cell>
					<!-- order info end -->
				</view>
				<!-- order other info begin -->
				<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>充电度数（度）:</view>
							<view class="font-weight-bold">{{ order.chargeDegree }}</view>
						</view>
						<view class="pay-cell">
							<view>汽车类型:</view>
							<view class="font-weight-bold">{{ order.carType }}</view>
						</view>
						<view class="pay-cell">
							<view>实时充电金额（元）:</view>
							<view class="font-weight-bold">{{ order.chargePrice }}</view>
						</view>
						<view class="pay-cell">
							<view>预付资金（元）:</view>
							<view class="font-weight-bold">{{ order.frozenPrice }}</view>
						</view>
					</view>
				</list-cell>
				<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>开始时间:</view>
							<view class="font-weight-bold">{{ order.startTime }}</view>
						</view>
						<view class="pay-cell">
							<view>结束时间:</view>
							<view class="font-weight-bold">{{ order.endTime }}</view>
						</view>
						<view class="pay-cell">
							<view>订单状态:</view>
							<view class="font-weight-bold">
								{{
				                    order.orderStatus == 1 ? '已支付' : 
				                    order.orderStatus == 2 ? '充电中' : 
				                    order.orderStatus == 5 ? '结束' : 
				                    order.orderStatus == 6 ? '退款异常' : 
				                    order.orderStatus == 7 ? '退款中' : ''
				                }}
							</view>
						</view>
						<view class="pay-cell">
							<view>二维码交易编号:</view>
							<view class="font-weight-bold">{{ order.billNo }}</view>
						</view>
					</view>
				</list-cell>
				<list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>充电流水号:</view>
							<view class="font-weight-bold">{{ order.number }}</view>
						</view>
						<view class="pay-cell">
							<view>电池百分比（%）:</view>
							<view class="font-weight-bold">{{ order.soc }}</view>
						</view>
						<view class="pay-cell">
							<view>交易总金额（万元）:</view>
							<view class="font-weight-bold">{{ order.money }}</view>
						</view>
						<view class="pay-cell">
							<view>订单创建时间:</view>
							<view class="font-weight-bold">{{ order.createdTime }}</view>
						</view>
					</view>
				</list-cell>
				<!-- order other info end -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		formatDateTime
	} from '@/utils/util'
	import {
		orderDetail,
		orderReceive,
	} from '@/api/order'
	const title = ref('订单详情')
	const order = ref({
		shop: {
			name: ''
		},
		statusDto: {
			payType: ''
		}
	})
	const numForMading = ref(5)

	onLoad((option) => {
		detail(option.id);
	})

	const detail = async (id) => {
		let data = await orderDetail(id);
		if (data) {
			order.value = data.data.data;
		}
	}
	const openLocation = () => {
		let shop = order.value.shop;
		uni.openLocation({
			address: shop.addressMap + shop.address + " " + shop.name,
			latitude: parseFloat(shop.lat),
			longitude: parseFloat(shop.lng),
			fail(res) {
				console.log(res);
			}
		});
	}
	const makePhoneCall = () => {
		let shop = order.value.shop;
		uni.makePhoneCall({
			phoneNumber: shop.mobile,
			fail(res) {
				console.log(res)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 30rpx;
		border-radius: 8rpx;
	}


	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}



	/* #ifdef H5 */
	page {
		min-height: 100%;
		background-color: $bg-color;
	}

	/* #endif */
	.order-box {
		padding: 20rpx;
		/* #ifdef H5 */
		margin-bottom: 100rpx;
		/* #endif */
	}

	.drinks-img {
		width: 260rpx;
		height: 260rpx;
	}

	.tips {
		margin: 60rpx 0 80rpx;
		line-height: 48rpx;
	}


	@mixin arch {
		content: "";
		position: absolute;
		background-color: $bg-color;
		width: 30rpx;
		height: 30rpx;
		bottom: -15rpx;
		z-index: 10;
		border-radius: 100%;
	}

	.section {
		position: relative;

		&::before {
			@include arch;
			left: -15rpx;
		}

		&::after {
			@include arch;
			right: -15rpx;
		}
	}

	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}

	.sort-num {
		font-size: 64rpx;
		font-weight: bold;
		color: $text-color-base;
		line-height: 2;
	}

	.steps__img-column {
		display: flex;
		margin: 30rpx 0;

		.steps__img-column-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.unactive {
				color: #919293;
			}
		}
	}

	.steps__text-column {
		display: flex;
		margin-bottom: 40rpx;

		.steps__text-column-item {
			flex: 1;
			display: inline-flex;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: $font-size-base;
			color: $text-color-assist;

			&.active {
				color: $text-color-base;
				font-weight: bold;

				.steps__column-item-line {
					background-color: $text-color-base;
				}
			}

			.steps__column-item-line {
				flex: 1;
				height: 2rpx;
				background-color: #919293;
				transform: scaleY(0.5);
			}

			.steps__text-column-item-text {
				margin: 0 8px;
			}
		}
	}

	.icon-lamp,
	.icon-daojishi,
	.icon-takeout,
	.icon-doorbell {
		font-size: 60rpx;
	}

	.iconfont-yshop {
		color: #09b4f1;
	}
</style>